import React, { useEffect, useState } from 'react';
import { Col, Row, Card, Tooltip, Button } from 'tdesign-react';
import Style from './MiddleChart.module.less';
import { useNavigate } from 'react-router-dom';
import { defaultColor } from 'configs/color';
import DynamicTable from './DynamicTable';
import { getStatusByDayAPI } from '@/api/room.api';
import dayjs from 'dayjs';
import DateSwitcher from './DateSwitcher';

// RoomBlock 组件，接收 roomInfo 和 floorNumber 作为 props
const RoomBlock = ({ roomInfo, floorNumber }: { roomInfo: any, floorNumber: any }) => {
  const navigate = useNavigate();
  const status = roomInfo.status || 'available';
  let bgColor = defaultColor[2]; // 可用-绿色
  let borderColor = '#b7eb8f';
  if (status === 'occupied') {
    bgColor = '#ff4d4f'; // 占用-红色
    borderColor = '#ffccc7';
  } else if (status === 'maintenance') {
    bgColor = '#bfbfbf'; // 维护-灰色
    borderColor = '#e0e0e0';
  }
  return (
    <Tooltip content={`${roomInfo.roomNumber} ${status === 'available' ? '可用' : status === 'occupied' ? '占用' : '维护'}）`} placement="top">
      <Button
        onDoubleClick={() => {
          if (status === 'available') {
            navigate('/room/reverse', {
              state: {
                roomNumber: roomInfo.roomNumber,
                roomId: roomInfo.id,
                floorNumber,
              }
            });
          }
        }}
        disabled={status !== 'available'}
        style={{
          width: 36,
          height: 36,
          background: bgColor,
          border: `0px solid ${borderColor}`,
          borderRadius: 4,
          marginRight: 6,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          userSelect: 'none',
        }}
      >
      </Button>
    </Tooltip>
  );
};

const MiddleChart = () => {
  const [floors, setFloors] = useState<any[]>([]);
  const [selectedDate, setSelectedDate] = useState<string>(dayjs().format('YYYY-MM-DD'));

  useEffect(() => {
    getStatusByDayAPI(selectedDate).then((res) => {
      console.log(res);

      setFloors(res.data.data || []);
    });
  }, [selectedDate]);

  return (
    <Row gutter={[16, 16]} className={Style.middleChartPanel}>
      <Col xs={12} xl={4}>
        <Card bordered={false} header={
          <>
            <h3>可用包间</h3>
            {/* 状态图例说明 */}
            <div className={Style['room-legend']}>
              <div className={Style['room-legend-item']} style={{ background: '#00a870' }} />
              <span className={Style['room-legend-label']}>可用</span>
              <div className={Style['room-legend-item']} style={{ background: '#ff4d4f' }} />
              <span className={Style['room-legend-label']}>占用</span>
              <div className={Style['room-legend-item']} style={{ background: '#bfbfbf' }} />
              <span className={Style['room-legend-label']}>维护</span>
            </div>
          </>
        }>
          <DateSwitcher value={selectedDate} onChange={setSelectedDate} />
          {/* 楼层房间效果 */}
          <div className={Style['room-layout']}>
            {/* 楼层列 */}
            <div className={Style['room-floor-col']}>
              {floors
                .slice()
                .sort((a, b) => Number(b.floorNumber) - Number(a.floorNumber))
                .map((floor) => (
                  <div key={floor.floorId} className={Style['room-floor-label']}>
                    {floor.floorNumber}F
                  </div>
                ))}
            </div>
            {/* 房间方块 */}
            <div>
              {floors
                .slice()
                .sort((a, b) => Number(b.floorNumber) - Number(a.floorNumber))
                .map((floor) => (
                  <div key={floor.floorId} className={Style['room-row']}>
                    {floor.rooms.map((room: any) => (
                      <RoomBlock key={room.id} roomInfo={room} floorNumber={floor.floorNumber} />
                    ))}
                  </div>
                ))}
            </div>
          </div>
        </Card>
      </Col>
      <Col xs={12} xl={8}>
        <Card title='最近审批动态' bordered={false}>
          <DynamicTable />
        </Card>
      </Col>
    </Row>
  );
};

export default React.memo(MiddleChart);
